import React, { PurComponent, Fragment } from 'react'
import PropTypes from 'prop-types'

export class Tabs extends PurComponent {
  constructor(props) {
    super(props)
    this.state = {
      activeIndex: props.activeIndex
    }
  }

  tabChange = (e, index) => {
    e.preventDefault()
    this.setState({
      activeIndex: index
    })
    this.props.onTabChange(index)
  }

  render() {
    const { children } = this.props
    const { activeIndex } = this.state

    return (
      <ul className="nav nav-tabs nav-fill my-4">
        {
          React.Children.map(children, (child, index) => {
            const activeClassName = (activeIndex === index) ? 'nav-link active' : 'nav-link'
            return (
              <li className="nav-item">
                <a role="button"
                  className={activeClassName}
                  onClick={(e) => { this.tabChange(e, index) }}
                >
                  {child}
                </a>
              </li>
            )
          })}
      </ul>
    )
  }
}

Tabs.propTypes = {
  activeIndex: PropTypes.number.isRequired,
  onTabChange: PropTypes.func.isRequired,
}

export const Tab = ({ children }) => {
  <Fragment>{children}</Fragment>
}